<template>
  <Modal v-model="visible" width="500" title="数据导入">
    <div class="step">
      <h4>第一步</h4>
      <p>请按照数据模板的格式准备导入线索数据</p>
      <span style="color: #4876FF; cursor: pointer;" @click="onDownload">
        <Icon type="md-download" />下载线索数据模板</span>
    </div>
    <div class="step">
      <h4>第二步</h4>
      <p>请填写好线索数据相关内容</p>
    </div>
    <div class="step">
      <h4>第三步</h4>
      <p>请填编辑一个导入批次名</p>
      <Input v-model="batchName" placeholder="请输入批次名" maxlength='20' show-word-limit />
    </div>
    <div class="step">
      <h4>第四步</h4>
      <p>请上传已填写的“线索数据模板”及填写批次名</p>
      <div style="display: flex; align-items: flex-end; margin-top: 5px;" v-show="batchName">
        <div style="display: flex; align-items: flex-end; margin-top: 5px;">
          <Upload ref="upload" :action="upload.reqUrl" :headers="upload.headers"
            :data="upload.data" :show-upload-list="false" accept=".xls, .xlsx"
            :max-size="10240" :on-exceeded-size="onExceededSize"
            :before-upload="onBeforeUpload" :on-success="onSuccess">
            <Button>上传文件</Button>
          </Upload>
          <p class="file">
            <span v-if="errUrl" @click="onDownloadErr">异常信息下载</span>
            <span v-else>{{ file.name }}</span>
          </p>
        </div>
      </div>
    </div>

    <div slot="footer" class="footer">
      <Button @click="hide">取消</Button>
      <Button type="primary" @click="onConfirm">导入</Button>
    </div>
  </Modal>
</template>

<script>
  import toolApi from '@/biz/base/tool'
  import clueImportMgr from '@/biz/customer/clueImport'
  export default {
    data() {
      return {
        visible: false,
        upload: clueImportMgr.importFile(),
        file: '',
        errUrl: '',
        batchName: ''
      }
    },
    methods: {
      onConfirm() {
        if (!this.batchName) {
          this.$Message.error('请输入批次名')
          return
        }
        if (!this.file) {
          this.$Message.error('请选择文件')
          return
        }
        this.$refs.upload.post(this.file)
      },
      // 上传成功
      onSuccess(res, file, fileList) {
        if (res.code == '200') {
          if (res.data) {
            this.errUrl = res.data
            this.$Message.error('请根据异常信息中提示的问题进行修改后，重新提交')
          } else {
            this.$Message.success('导入成功')
            this.$emit('success')
            this.hide()
          }
        } else {
          this.$Message.error(res.msg)
        }
      },
      onBeforeUpload(file) {
        console.log(file, 'fileeeeeeeeeeee')
        clueImportMgr.importFile({
          batchName: this.batchName,
        })
        this.file = file
        this.errUrl = ''
        return false
      },
      // 文件超过大小
      onExceededSize(file) {
        this.$Message.warning('最大支持10M')
      },
      // 下载异常信息
      onDownloadErr() {
        console.log(this.errUrl, 'this.errUrl')
        toolApi.downloadFile(this.errUrl.accessoryUrl, this.errUrl.accessoryName)
      },
      onDownload() {
        clueImportMgr.templateDownload()
      },
      show() {
        this.visible = true
        this.batchName = ''
      },
      hide() {
        this.visible = false
        this.file = ''
        this.errUrl = ''
      },
    },
  }
</script>

<style lang='scss' scoped>
  .step {
    margin: 0 0 24px 10px;

    h4 {
      margin-bottom: 5px;
    }

    .file {
      span {
        color: #4876ff;
        text-decoration: underline;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
</style>